<template>
<div class="about">
  <h2>x: {{x}}, y: {{y}}</h2>
  <hr>

  <h2 v-if="loading">正在加载中...</h2>
  <h2 v-else-if="errorMsg">{{errorMsg}}</h2>
  <!-- <img v-else :src="result.message" alt=""> -->
  <!-- <img v-else :src="result?.message" alt=""> -->
  <img v-else-if="result" :src="result[0].id" alt="">

</div>
</template>

<script lang="ts">
import {watch, defineComponent} from 'vue'
import useClickPosition from '@/hooks/useClickPosition'
import useUrlLoader from '@/hooks/useUrlLoader'

interface IDog {
  message: string
  status: string
}

interface ICat {
  id: string
  url: string
}

export default defineComponent({
  
  setup() {
    const {x, y} = useClickPosition()
    // const {result, loading, errorMsg} = useUrlLoader<IDog>('https://dog.ceo/api/breeds/image/random')   
    // watch(result, (value) => {
    //   // 需要输出一下图片url
    //   console.log(value?.message)
    // })
    const {result, loading, errorMsg} = useUrlLoader<ICat[]>('https://api.thecatapi.com/v1/images/search')   

    watch(result, (value) => {
      // 需要输出一下图片url
      if (value) {
        console.log(value[0].url)
      }
    })

    return {
      x,
      y,
      result, 
      loading, 
      errorMsg
    }
  }
})
</script>
